package com.example.show_auto.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

/**
 * 侧边菜单项数据类
 */
data class MenuItem(
    val id: String,
    val title: String,
    val icon: ImageVector,
    val description: String = ""
)

/**
 * 侧边抽屉菜单组件
 */
@Composable
fun DrawerMenu(
    currentPage: String,
    onMenuItemClick: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    val menuItems = listOf(
        MenuItem(
            id = "home",
            title = "首页",
            icon = Icons.Default.Home,
            description = ""
        ),
        MenuItem(
            id = "personal_data",
            title = "个人数据",
            icon = Icons.Default.Person,
            description = "导入个人数据"
        ),
        MenuItem(
            id = "recipe_calculator",
            title = "查询厨师修炼",
            icon = Icons.Default.Star,
            description = "修炼菜谱计算器"
        ),
        MenuItem(
            id = "rune_query",
            title = "查询符文配置",
            icon = Icons.Default.Warning,
            description = "查询符文菜谱"
        ),
        MenuItem(
            id = "comprehensive_query",
            title = "查询采集编队",
            icon = Icons.Default.Search,
            description = "查询采集编队"
        ),
        MenuItem(
            id = "guest_query",
            title = "查询碰瓷",
            icon = Icons.Default.Person,
            description = "查询贵客碰瓷"
        ),
        MenuItem(
            id = "comprehensive_query_new",
            title = "综合查询",
            icon = Icons.Default.List,
            description = "综合查询功能"
        ),
        MenuItem(
            id = "system_config",
            title = "系统设置",
            icon = Icons.Default.Build,
            description = "设置与更新"
        ),
        MenuItem(
            id = "usage_guide",
            title = "使用说明",
            icon = Icons.Default.Info,
            description = "应用使用指南"
        )
    )

    Column(
        modifier = modifier
            .fillMaxHeight()
            .width(280.dp)
            .background(MaterialTheme.colorScheme.surface)
            .padding(vertical = 16.dp)
    ) {
        // 菜单标题
        Text(
            text = "轮椅",
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colorScheme.primary,
            modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
        )
        
        Text(
            text = "查询助手",
            fontSize = 14.sp,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        HorizontalDivider()
        
        Spacer(modifier = Modifier.height(8.dp))
        
        // 菜单项列表
        LazyColumn {
            items(menuItems) { item ->
                DrawerMenuItem(
                    item = item,
                    isSelected = currentPage == item.id,
                    onClick = { onMenuItemClick(item.id) }
                )
            }
        }
    }
}

/**
 * 单个菜单项组件
 */
@Composable
private fun DrawerMenuItem(
    item: MenuItem,
    isSelected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    val backgroundColor = if (isSelected) {
        MaterialTheme.colorScheme.primaryContainer
    } else {
        MaterialTheme.colorScheme.surface
    }
    
    val contentColor = if (isSelected) {
        MaterialTheme.colorScheme.onPrimaryContainer
    } else {
        MaterialTheme.colorScheme.onSurface
    }

    Row(
        modifier = modifier
            .fillMaxWidth()
            .clickable { onClick() }
            .background(backgroundColor)
            .padding(horizontal = 16.dp, vertical = 12.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = item.icon,
            contentDescription = item.title,
            tint = contentColor,
            modifier = Modifier.size(24.dp)
        )
        
        Spacer(modifier = Modifier.width(16.dp))
        
        Column(
            modifier = Modifier.weight(1f)
        ) {
            Text(
                text = item.title,
                fontSize = 16.sp,
                fontWeight = FontWeight.Medium,
                color = contentColor
            )
            
            if (item.description.isNotEmpty()) {
                Text(
                    text = item.description,
                    fontSize = 12.sp,
                    color = contentColor.copy(alpha = 0.7f)
                )
            }
        }
    }
}
